@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';

@mixin item ($type) {
  width: 100px;
  height: 60px;
  margin: 10px;

  font-size: 1.2rem;
  color: simple-var($theme-variables, 'sys', $type, 'text-main');

  background-color: simple-var($theme-variables, 'sys', $type, 'background');
  border: 3px solid simple-var($theme-variables, 'sys', $type, 'decor-activated');
  border-radius: 0.2em;
}

.checked {
  @include item('primary');
  &::before {
    content: '🌝 ';
  }
}

.unchecked {
  @include item('neutral');
  &::before {
    content: '🌚 ';
  }
}


.toggleGroup {
  display: flex;
  gap: $dimension-1m;
  align-items: center;
}